<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>TypeScript核心语法 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="基本数据类型 布尔值：boolean  数值：number  字符串：string  特别的类型：void / undefined / null   undefined 和 null 是所有类型的子类型 任意值(any)表示允许赋值为任意类型  any 类型的变量可以赋值任意类型的值  any 类型的变量可以使用任意属性和方法  定义不指定类型的变量，且定义时不赋值，相当于类型的 any   类">
<meta name="keywords" content="TypeScript">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript核心语法">
<meta property="og:url" content="http://yoursite.com/2019/11/07/TypeScript核心语法/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="基本数据类型 布尔值：boolean  数值：number  字符串：string  特别的类型：void / undefined / null   undefined 和 null 是所有类型的子类型 任意值(any)表示允许赋值为任意类型  any 类型的变量可以赋值任意类型的值  any 类型的变量可以使用任意属性和方法  定义不指定类型的变量，且定义时不赋值，相当于类型的 any   类">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2019-11-08T09:37:04.348Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="TypeScript核心语法">
<meta name="twitter:description" content="基本数据类型 布尔值：boolean  数值：number  字符串：string  特别的类型：void / undefined / null   undefined 和 null 是所有类型的子类型 任意值(any)表示允许赋值为任意类型  any 类型的变量可以赋值任意类型的值  any 类型的变量可以使用任意属性和方法  定义不指定类型的变量，且定义时不赋值，相当于类型的 any   类">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-TypeScript核心语法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/11/07/TypeScript核心语法/" class="article-date">
  <time datetime="2019-11-07T10:29:03.000Z" itemprop="datePublished">2019-11-07</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/TypeScript/">TypeScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      TypeScript核心语法
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="基本数据类型"><a href="#基本数据类型" class="headerlink" title="基本数据类型"></a>基本数据类型</h1><ol>
<li><p>布尔值：boolean</p>
</li>
<li><p>数值：number</p>
</li>
<li><p>字符串：string</p>
</li>
<li><p>特别的类型：void / undefined / null</p>
</li>
</ol>
<p><code>undefined</code> 和 <code>null</code> 是所有类型的子类型</p>
<h2 id="任意值-any"><a href="#任意值-any" class="headerlink" title="任意值(any)"></a>任意值(any)</h2><p>表示允许赋值为任意类型</p>
<ul>
<li><p><code>any</code> 类型的变量可以赋值任意类型的值</p>
</li>
<li><p><code>any</code> 类型的变量可以使用任意属性和方法</p>
</li>
<li><p>定义不指定类型的变量，且定义时不赋值，相当于类型的 <code>any</code></p>
</li>
</ul>
<h2 id="类型推论"><a href="#类型推论" class="headerlink" title="类型推论"></a>类型推论</h2><p>TypeScript 会在没有明确的指定类型的时候推测出一个类型</p>
<ul>
<li><p>定义变量时赋值了，推断为对应的类型</p>
</li>
<li><p>定义变量时没有赋值，推断为 <code>any</code> 类型</p>
</li>
</ul>
<h2 id="联合类型（Union-Types）"><a href="#联合类型（Union-Types）" class="headerlink" title="联合类型（Union Types）"></a>联合类型（Union Types）</h2><p>表示取值可以为多种类型中的一种</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let c1: number | string = 3;</span><br><span class="line">c1 = &quot;123&quot;;</span><br></pre></td></tr></table></figure>

<h2 id="类型断言（Type-Assertion）"><a href="#类型断言（Type-Assertion）" class="headerlink" title="类型断言（Type Assertion）"></a>类型断言（Type Assertion）</h2><p>可以用来手动指定一个值的类型</p>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>&lt;类型&gt;值</p>
</blockquote>
<blockquote>
<p>值 as 类型</p>
</blockquote>
<p>注意：tsx中只能用这种方式</p>
<h2 id="接口（Interfaces）"><a href="#接口（Interfaces）" class="headerlink" title="接口（Interfaces）"></a>接口（Interfaces）</h2><p>在 TypeScript 中，我们使用接口来定义对象的类型</p>
<ul>
<li><p>接口：在面向对象的语言中，是 n 个行为的抽象/描述，但没有实现，由类去实现</p>
</li>
<li><p>在 TS 中，接口也可以包含状态的描述</p>
</li>
<li><p>只读属性： reasonly</p>
</li>
<li><p>可选属性：?</p>
</li>
</ul>
<p>样例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">interface IPerson &#123;</span><br><span class="line">    readonly id: number;</span><br><span class="line">    name: string;</span><br><span class="line">    age: number;</span><br><span class="line">    sex?: string;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const p: IPerson=&#123;</span><br><span class="line">    id: 1,</span><br><span class="line">    name: &apos;demo&apos;,</span><br><span class="line">    age: 12,</span><br><span class="line">    sex: &apos;女&apos;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const p2: IPerson = &#123;</span><br><span class="line">    id: 2,</span><br><span class="line">    name: &apos;demo2&apos;,</span><br><span class="line">    age: 13</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h2><h3 id="方式一"><a href="#方式一" class="headerlink" title="方式一"></a>方式一</h3><blockquote>
<p><code>number[]</code></p>
</blockquote>
<h3 id="方式二（泛型）"><a href="#方式二（泛型）" class="headerlink" title="方式二（泛型）"></a>方式二（泛型）</h3><blockquote>
<p><code>Array&lt;number&gt;</code></p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 使用方式一定义字符串数组类型变量 --&gt;</span><br><span class="line">const names: string[] = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 使用方式二定义字符串数组类型变量 --&gt;</span><br><span class="line">const names: Array&lt;string&gt; = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 定义任意类型数组类型变量 --&gt;</span><br><span class="line">const arr: any[] = [&apos;b&apos;, 1, true]</span><br></pre></td></tr></table></figure>

<h2 id="元组"><a href="#元组" class="headerlink" title="元组"></a>元组</h2><p>可包含多种类型元素的数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 定义元组 --&gt;</span><br><span class="line">let person: [string, number] = [&apos;tom&apos;, 12]</span><br></pre></td></tr></table></figure>

<p>当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型（不能为联合类型之外的其他类型）</p>
<h2 id="函数的类型"><a href="#函数的类型" class="headerlink" title="函数的类型"></a>函数的类型</h2><h3 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function fn1(x: string, y: number): number &#123;</span><br><span class="line">    return 2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="可选参数"><a href="#可选参数" class="headerlink" title="可选参数"></a>可选参数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const a= function fn1(x: string, y?: number): number &#123;</span><br><span class="line">    return 2;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a);</span><br></pre></td></tr></table></figure>

<h3 id="形参默认值"><a href="#形参默认值" class="headerlink" title="形参默认值"></a>形参默认值</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const a = function fn1(x: string, y: number = 3): number &#123;</span><br><span class="line">    retu</span><br></pre></td></tr></table></figure>

<h3 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a>剩余参数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const a = function fn1(x: string, ...args: any[]) &#123;</span><br><span class="line">    return args;</span><br><span class="line">&#125;</span><br><span class="line">console.log(a(&apos;a&apos;, 1, &quot;2&quot;, &quot;jdsa&quot;, true));</span><br></pre></td></tr></table></figure>

<h2 id="声明文件"><a href="#声明文件" class="headerlink" title="声明文件"></a>声明文件</h2><p>当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能</p>
<h3 id="声明语句"><a href="#声明语句" class="headerlink" title="声明语句"></a>声明语句</h3><p>如果需要 <code>TypeScript</code> 对新的语法进行检查，需要加载对应的类型说明代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">declare var jQuery: (selector: string) =&gt; any;</span><br></pre></td></tr></table></figure>

<h3 id="声明文件-1"><a href="#声明文件-1" class="headerlink" title="声明文件"></a>声明文件</h3><p>把声明语句放在一个单独的文件（jQuery.d.ts）中，<code>ts</code> 会自动解析到项目中所有声明文件</p>
<h3 id="下载声明文件"><a href="#下载声明文件" class="headerlink" title="下载声明文件"></a>下载声明文件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @types/jquery --save-dev</span><br></pre></td></tr></table></figure>

<h2 id="枚举（Enum）"><a href="#枚举（Enum）" class="headerlink" title="枚举（Enum）"></a>枚举（Enum）</h2><p>用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。</p>
<p>枚举使用 enum 关键字来定义</p>
<h2 id="类（class）"><a href="#类（class）" class="headerlink" title="类（class）"></a>类（class）</h2><h3 id="访问修饰符"><a href="#访问修饰符" class="headerlink" title="访问修饰符"></a>访问修饰符</h3><p>public：任何地方都可见，默认是 public</p>
<p>private：只在类内部可见</p>
<p>protected：类内部或子类中可见</p>
<h3 id="readonly"><a href="#readonly" class="headerlink" title="readonly"></a>readonly</h3><p>只能通过构造方法赋值一次</p>
<h3 id="抽象类（abstract）"><a href="#抽象类（abstract）" class="headerlink" title="抽象类（abstract）"></a>抽象类（abstract）</h3><p>可以包含抽象方法</p>
<p>不可以有实例</p>
<h3 id="抽象类与实现类的区别"><a href="#抽象类与实现类的区别" class="headerlink" title="抽象类与实现类的区别"></a>抽象类与实现类的区别</h3><ul>
<li><p>抽象方法：有abstract / 没有方法体 / 不能创建实例</p>
</li>
<li><p>实现方法：没有abstract / 有方法体 / 可以创建实例</p>
</li>
</ul>
<h2 id="接口与类"><a href="#接口与类" class="headerlink" title="接口与类"></a>接口与类</h2><ul>
<li><p>对 <strong>对象的形状（shape）</strong> 进行描述</p>
</li>
<li><p>对类的一部分行为进行抽象</p>
</li>
<li><p>父接口可以有多个，但父类只能有一个：多实现，单继承</p>
</li>
<li><p>一个类可以实现一个接口</p>
</li>
<li><p>一个类可以继承于另一个类</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">interface Light&#123;</span><br><span class="line">    lightOn(): void;</span><br><span class="line">    lightOff(): void;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- 类实现接口 --&gt;</span><br><span class="line">class Car implements Light &#123;</span><br><span class="line">    lightOn()&#123;</span><br><span class="line">        console.log(&apos;Car light on&apos;);</span><br><span class="line">    &#125;</span><br><span class="line">    lightOff()&#123;</span><br><span class="line">        console.log(&apos;Car light off&apos;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h2><p>泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">function createArray&lt;T&gt;(length: number, value: T): Array&lt;T&gt; &#123;</span><br><span class="line">    let result: Array&lt;T&gt; = [];</span><br><span class="line">    for (let i = 0; i &lt; length; i++) &#123;</span><br><span class="line">        result[i] = value;</span><br><span class="line">    &#125;</span><br><span class="line">    return result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">createArray&lt;string&gt;(3, &apos;x&apos;)</span><br></pre></td></tr></table></figure>

<h1 id="使用-react-cli-创建-react-ts-项目"><a href="#使用-react-cli-创建-react-ts-项目" class="headerlink" title="使用 react-cli 创建 react-ts 项目"></a>使用 react-cli 创建 react-ts 项目</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">create-react-app react-ts --typescript</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/11/07/TypeScript核心语法/" data-id="ck4r400rw008kl0w06tnu7qdb" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/TypeScript/">TypeScript</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2019/11/08/Flutter-初识篇/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Flutter-初识篇
        
      </div>
    </a>
  
  
    <a href="/2019/11/04/redux异步编程/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">redux异步编程</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>